<template>
    <div class="page">
        <el-row>
            <el-col :span="24">
                <el-select
                    @change="timeChangeHandle"
                    clearable
                    v-model="value"
                    placeholder="请选择故障类型"
                >
                    <el-option
                        v-for="item in optionsTime"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>

                <el-select
                    @change="equipTypeChangeHandle"
                    clearable
                    style="margin-left:40px"
                    v-model="equipType"
                    placeholder="请选择故障类型"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div style="display:flex;margin-top:20px" class="kk">
            <div class="btn" @click="open">全年故障百分比图</div>
            <div id="main" style="flex:1;height:400px"></div>
            <div id="main2" style="flex:1;height:400px"></div>
        </div>

        <el-row>
            <el-col :span="24">
                <el-select
                    @change="handleLineChange"
                    clearable
                    v-model="lineLoad"
                    placeholder="请选择线路"
                >
                    <el-option
                        v-for="item in lineOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>

                <el-select
                    @change="handleAreaChange"
                    style="margin-left:40px"
                    clearable
                    v-model="stationArea"
                    placeholder="请选择站点"
                >
                    <el-option
                        v-for="item in stationAreaOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    >
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <hr />

        <div class="text" v-for="(item, idx) in curFile" :key="idx">
            <i @click="doanload(item.path)" class="el-icon-download"></i>
            <span>{{ item.fileName }}</span>
            <span>({{ item.size }})</span>
        </div>

        <el-dialog
            title="全年故障百分比图"
            :visible.sync="dialogVisible"
            width="50%"
        >
            <div id="dz" ref="mycharts" :style="{ height: '25vw' }"></div>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from "echarts";
import * as dayjs from "dayjs";
export default {
    data() {
        return {
            example: null,
            equipType: "",
            options: [
                {
                    value: 1,
                    label: "道岔故障",
                },
                {
                    value: 2,
                    label: "联锁系统故障",
                },
                {
                    value: 3,
                    label: "计轴故障",
                },
                {
                    value: 4,
                    label: "信号机故障",
                },
                {
                    value: 5,
                    label: "屏蔽门-紧停-扣车故障",
                },
                {
                    value: 6,
                    label: "电源系统故障",
                },
                {
                    value: 7,
                    label: "DCS数据通信故障",
                },
                {
                    value: 8,
                    label: "LEU设备故障",
                },
                {
                    value: 9,
                    label: "ATS设备故障",
                },
                {
                    value: 10,
                    label: "其他设备故障",
                },
                {
                    value: 11,
                    label: "车载设备故障",
                },
            ],
            lineLoad: "",
            stationArea: "",

            value: "2022",
            optionsTime: [],
            lineOptions: [],
            stationAreaOptions: [],
            linelistX1: [],
            linelistY1: [],
            linelistX2: [],
            linelistY2: [],
            fileList: [],
            curFile: [],
            list: [],
            dialogVisible: false,
            has: false,
        };
    },
    created() {
        this.getYearSelectData();
    },
    mounted() {},
    methods: {
        open() {
            this.dialogVisible = true;

            if (this.has) return;
            this.has = true;
            this.draw();
        },
        draw() {
            this.$nextTick(() => {
                var chartDom = document.getElementById("dz");
                var myChart = echarts.init(this.$refs.mycharts);
                console.log(this.list, "咩回事");
                var option;
                let sum = 0;
                for (let i = 0; i < this.list.length; i++)
                    sum += this.list[i].value;
                option = {
                    legend: {
                        right: "0",
                        orient: "vertical",
                        textStyle: {
                            color: "#000",
                        },
                    },
                    series: [
                        {
                            type: "pie",
                            radius: ["50%", "70%"],
                            center: ["50%", "50%"],
                            label: {
                                show: false,
                                position: "center",
                                formatter(item) {
                                    return (
                                        item.name +
                                        "占" +
                                        (Math.floor((item.value / sum) * 100) +
                                            "%")
                                    );
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: this.list,
                        },
                    ],
                };
                myChart.setOption(option);
            });
        },
        async getYearSelectData() {
            const { data } = await this.$http.get(
                "/services/app/FailureFillService/GetYearSelect"
            );
            this.optionsTime = data.result || [];
            this.getLineKoadCascaderList();
        },

        async getAllFailureFillList(type) {
            let params;
            if (type === 1) {
                params = {
                    userId: sessionStorage.getItem("userId") || "",
                    year: this.value,
                };
                for (let i = 0; i < this.options.length; i++) {
                    const { data } = await this.$http.get(
                        "/services/app/FailureFillService/GetAllFailureFill",
                        {
                            params: {
                                userId: sessionStorage.getItem("userId") || "",
                                equipType: this.options[i].label,
                                year: this.value,
                                lineLoad: this.lineLoad,
                                stationArea: this.stationArea,
                            },
                        }
                    );
                    let sum = data.result.reduce(
                        (ljj, val) => ljj + val.count,
                        0
                    );
                    this.list[i] = {
                        name: this.options[i].label,
                        value: sum,
                    };
                    console.log(this.list);
                }
            } else if (type === 2) {
                params = {
                    userId: sessionStorage.getItem("userId") || "",
                    equipType: this.equipType,
                    year: this.value,
                    lineLoad: this.lineLoad,
                    stationArea: this.stationArea,
                };
            }
            const { data } = await this.$http.get(
                "/services/app/FailureFillService/GetAllFailureFill",
                {
                    params,
                }
            );

            if (type === 1) {
                this.linelistX1 = [];
                this.linelistY1 = [];
                this.fileList = [];

                data.result.forEach((item) => {
                    item.fileInfos = item.fileInfos.map((val) => {
                        return { ...val, month: item.month };
                    });
                    this.fileList = [...this.fileList, ...item.fileInfos];
                    this.curFile = this.fileList.filter((val) => {
                        return val.month == dayjs().format("") + "月";
                    });
                    this.linelistX1.push(item.month);
                    this.linelistY1.push(item.count);
                });
                this.drawLine1();
                this.draw();
            } else if (type === 2) {
                this.linelistX2 = [];
                this.linelistY2 = [];
                data.result.forEach((item) => {
                    this.linelistX2.push(item.month);
                    this.linelistY2.push(item.count);
                });
                this.drawLine2();
            }
        },
        async getLineKoadCascaderList() {
            const res = await this.$http.get(
                "/services/app/FailureFillService/GetLineKoadCascader"
            );
            if (res.data.success) {
                this.lineOptions = res.data.result || [];
                this.getAllFailureFillList(1);
                this.getAllFailureFillList(2);
            }
        },

        drawLine1() {
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                visualMap: [],

                title: {
                    text: "年故障总览",
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["该月故障次数"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                textStyle: {
                    color: "#fff",
                },
                xAxis: {
                    type: "category",
                    data: this.linelistX1,
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    type: "value",
                },
                series: [
                    {
                        name: "该月故障次数",
                        data: this.linelistY1,
                        type: "line",
                        showSymbol: false,
                        color: "#79b4bc",
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#448378" },
                                    { offset: 0.5, color: "#3f858d" },
                                    { offset: 1, color: "#249bb7" },
                                ]
                            ),
                        },
                    },
                ],
            };
            option && myChart.setOption(option);

            myChart.getZr().on("click", (params) => {
                let pointInPixel = [params.offsetX, params.offsetY];
                if (myChart.containPixel("grid", pointInPixel)) {
                    //点击第几个柱子
                    let pointInGrid = myChart.convertFromPixel(
                        { seriesIndex: 0 },
                        pointInPixel
                    );
                    // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
                    // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
                    // x轴数据的索引
                    let xIndex = pointInGrid[0];
                    this.curFile = this.fileList.filter((val) => {
                        return val.month == xIndex + 1 + "月";
                    });
                }
            });
        },
        drawLine2() {
            var chartDom2 = document.getElementById("main2");

            var myChart2 = echarts.init(chartDom2);

            var option2;
            option2 = {
                title: {
                    text: "故障统计",
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["该类型故障次数"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                textStyle: {
                    color: "#fff",
                },
                xAxis: {
                    type: "category",
                    data: this.linelistX2,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "该类型故障次数",
                        data: this.linelistY2,
                        type: "bar",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#448378" },
                                    { offset: 0.5, color: "#3f858d" },
                                    { offset: 1, color: "#249bb7" },
                                ]
                            ),
                        },
                    },
                ],
            };

            option2 && myChart2.setOption(option2);
        },
        timeChangeHandle() {
            this.getAllFailureFillList(1);
            this.getAllFailureFillList(2);
        },
        equipTypeChangeHandle() {
            this.getAllFailureFillList(2);
        },
        handleLineChange(val) {
            this.stationAreaOptions = [];
            this.stationArea = "";
            this.lineOptions.forEach((item) => {
                if (item.value === val) {
                    this.stationAreaOptions = item.children || [];
                }
            });
            this.getAllFailureFillList(2);
        },
        handleAreaChange() {
            this.getAllFailureFillList(2);
        },
        doanload(href) {
            if (!href) return;
            window.location.href = href;
        },
    },
};
</script>

<style lang="less" scoped>
.page {
    height: 100%;
    overflow: auto;
}
.kk {
    position: relative;

    .btn {
        border-radius: 20px;
        background-color: rgb(44, 110, 130);
        line-height: 30px;
        left: 45%;
        z-index: 200;
        cursor: pointer;
        font-size: 12px;
        padding: 0.1344vw 0.5813vw;
        transform: translateX(-100%);
        height: 30px;
        position: absolute;
    }
}

.text {
    font-weight: 700;
    font-size: 20px;
    margin-left: 5px;
    padding: 10px;
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
/deep/ .el-form-item__label {
    color: var(--input-fc);
}
/deep/ input {
    color: #fff;
}

/deep/ input[placeholder] {
    &::placeholder {
        color: #fff;
    }
}
/deep/ .el-form-item__content {
    .el-textarea__inner {
        background-color: var(--input-bgc);
    }
}
</style>
